<template>
  <div class="box">
    <div class="div">
      <!-- <img class="login-img" src="@/assets/img/login.png" /> -->
      <img class="login-img" v-if="configuration.bsLoginLogoImg" :src="configuration.bsLoginLogoImg" />
      <div class="identifying">{{ configuration.bsCopyright }}</div>
    </div>
    <div class="div">
<!--      <img class="headerlogo" src="@/assets/img/login-headerlogo.png" />-->
      <div class="formbox">
<!--        <div class="header">欢迎来到DTC++</div>-->
        <img class="login-log" src="@/assets/img/login-log.png" />
        <el-form @submit.native.prevent :model="dataForm" :rules="dataRule" ref="dataForm"
          @keyup.enter.native="dataFormSubmit()" status-icon>

          <el-form-item prop="userName">
            <div class="txt">用户名</div>
            <el-input class="info" v-model="dataForm.userName" :placeholder="this.$i18n.t('sys.userName')"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <div class="txt">密码</div>
            <el-input class="info" v-model="dataForm.password" type="password"
              :placeholder="this.$i18n.t('sys.password')"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="item-btn default-btn primary-btn" @click="dataFormSubmit()">{{ $i18n.t('homes.login') }}</div>
          </el-form-item>
        </el-form>
      </div>
    </div>


    <Verify ref="verify" :captcha-type="'blockPuzzle'" :explain="$i18n.t('homes.verifyTip')"
      :img-size="{ width: '400px', height: '200px' }" @success="login" />

  </div>
</template>

<script>
import Verify from '@/components/verifition/Verify'
import { encrypt } from '@/utils/crypto'
import { validNoEmptySpace } from '@/utils/validate'
import { formatConfigInfo } from '@/utils/websiteConfig'
export default {
  components: {
    Verify
  },
  data() {
    let validateSpace = (rule, value, callback) => {
      if (validNoEmptySpace(value)) {
        callback(new Error(this.$i18n.t('home.loginTip')))
      } else {
        callback()
      }
    }
    return {
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      dataForm: {
        userName: '',
        password: '',
        uuid: '',
        captcha: ''
      },

      // 背景样式
      backgroundImage: {
        width: '100%',
        height: '100%',
        backgroundSize: '100% 100%',
        position: 'fixed',
        top: 0
      },

      configuration: {
        bsLoginLogoImg: null,
        bsLoginBgImg: null,
        bsCopyright: null,
        bsTitleContent: null,
        bsTitleImg: null,
        bsMenuTitleOpen: null,
        bsMenuTitleClose: null
      },

      isSubmit: false,
      dataRule: {
        userName: [
          { required: true, message: this.$i18n.t('home.userNameNoNull'), trigger: 'blur' },
          { validator: validateSpace, trigger: 'blur' }
        ],
        password: [
          { required: true, message: this.$i18n.t('home.pawNoNull'), trigger: 'blur' }
        ],
        captcha: [
          { required: true, message: this.$i18n.t('home.capNoNull'), trigger: 'blur' }
        ]
      },
      captchaPath: ''
    }
  },
  beforeDestroy() {
    document.removeEventListener('keyup', this.handerKeyup)
  },
  created() {
    this.getWebConfigData()
    document.addEventListener('keyup', this.handerKeyup)
  },
  methods: {
    handerKeyup(e) {
      var keycode = document.all ? event.keyCode : e.which
      if (keycode === 13) {
        this.dataFormSubmit()
      }
    },
    // 提交表单
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.$refs.verify.show()
        }
      })
    },
    login(verifyResult) {
      if (this.isSubmit) {
        return
      }
      this.isSubmit = true
      this.$http({
        url: this.$http.adornUrl('/platformLogin'),
        method: 'post',
        data: this.$http.adornData({
          'userName': this.dataForm.userName,
          'passWord': encrypt(this.dataForm.password),
          'captchaVerification': verifyResult.captchaVerification
        })
      }).then(({ data }) => {
        this.isSubmit = false
        this.$cookie.set('bbcAuthorization_vp', data.accessToken)
        this.$router.replace({ name: 'home' })
      }).catch(() => {
        this.isSubmit = false
      })
    },
    // 获取网站配置信息
    getWebConfigData() {
      this.$http({
        url: this.$http.adornUrl('/sys/webConfig/getActivity'),
        method: 'get'
      }).then(({ data }) => {
        data = formatConfigInfo(data)
        this.configuration = data
        this.$store.commit('webConfig/addData', data)
        this.backgroundImage.backgroundImage = 'url(' + data.bsLoginBgImg + ')'
      })
    }
  }
}
</script>

<style scoped>
.box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  background: #fff;
  user-select: none;
}

.box .div {
  flex: 1;
  position: relative;
}

.box .div:first-child {
  background: #F2F2F2;
}

.login-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 448px;
}

.identifying {
  position: absolute;
  left: 50%;
  bottom: 70px;
  transform: translate(-50%, 0);
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #8D93A5;
}

.headerlogo {
  position: absolute;
  top: 47px;
  right: 30px;
  width: 200px;
  height: 37px;
}

.formbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 424px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header {
  font-size: 16px;
  font-weight: 500;
  color: #364F65;
}

.login-log {
  width: 108px;
  height: 45px;
  margin-top: 10px;
}

.box .el-form {
  width: 100%;
  margin-top: 44px;
}

.box .div .formbox >>> .el-form .el-input__inner {
  height: 50px!important;
  border-radius: 10px!important;
}

.txt {
  font-size: 16px;
  font-family: MiSans-Medium, MiSans;
  font-weight: 500;
  color: #364F65;
}

.box .el-form .default-btn.primary-btn {
  width: 100%;
  height: 50px;
  line-height: 50px;
  margin-top: 30px;
  border-radius: 10px;
  text-align: center;
  font-size: 16px;
  color: #FBFBFB;
  background: #039F66;
  border-color: #039F66;
}
</style>
